<template>
	<view style="background-color: #f8f8f8;">
		<view class="head_main">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;" @click="toback">
				<u-icon name="arrow-left" color="#333" label="龙庭管家" labelColor="#333" space="6">
				</u-icon>
			</view>
			<view class="con-body" style="width:100%;margin-top:250rpx;">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" :show="showEmpty">
				</u-empty>
				<view class="contact_con">
					<view class="con_list u-rela" v-for="(item,index) in list" :icon="item.icon" style="margin-bottom:20rpx;" @click="todetail(item)">
						<image :src="item.icon" class="con_img"></image>
						<view class="center_con">
							<view>
								<text class="center_title" style="">{{item.name}}</text>
								<text class="center_type" v-if="item.type==0">{{item.type_value}}</text>
								<text class="center_type" v-else style="background-color: #ffcc00;">{{item.type_value}}</text>
							</view>
							<view class="tel_con">{{item.tel}}</view>
							<view class="conment_con"> 
								<text>评价星级</text>
								<view class="dis_inl_blo" style="margin-left:5rpx;">
									<image v-if="item.star >= 1" src="https://resourse.cnlhjt.com/upload/20230213/8d67f9ca982c746abeb6b972e7741d76.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<image v-else src="https://resourse.cnlhjt.com/upload/20230213/6ad53837e2ae7f5aa54694bebe47351a.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									
									<image v-if="item.star >= 2" src="https://resourse.cnlhjt.com/upload/20230213/8d67f9ca982c746abeb6b972e7741d76.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<image v-else src="https://resourse.cnlhjt.com/upload/20230213/6ad53837e2ae7f5aa54694bebe47351a.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									
									<image v-if="item.star >= 3" src="https://resourse.cnlhjt.com/upload/20230213/8d67f9ca982c746abeb6b972e7741d76.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<image v-else src="https://resourse.cnlhjt.com/upload/20230213/6ad53837e2ae7f5aa54694bebe47351a.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									
									<image v-if="item.star >= 4" src="https://resourse.cnlhjt.com/upload/20230213/8d67f9ca982c746abeb6b972e7741d76.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<image v-else src="https://resourse.cnlhjt.com/upload/20230213/6ad53837e2ae7f5aa54694bebe47351a.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									
									<image v-if="item.star >= 5" src="https://resourse.cnlhjt.com/upload/20230213/8d67f9ca982c746abeb6b972e7741d76.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<image v-else src="https://resourse.cnlhjt.com/upload/20230213/6ad53837e2ae7f5aa54694bebe47351a.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<!-- <u-rate :current="5" v-model="comment" size="16" :disabled="true"></u-rate> -->
								</view>
							</view>
						</view>
						<view class="u-abso" style="display: inline-block;top:55rpx;right:10rpx;">
							<u-icon name="https://resourse.cnlhjt.com/upload/20221220/aca0f95f98a46f6fb42c85f0b080e04d.png" size="35" color="#2e8b57" @click="call(item.tel)"></u-icon>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getCaller
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				list: [],
				showEmpty: false,
				comment:5,
				star: 5
			};
		},
		onLoad() {
			getCaller().then(this.getCaller);
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.list=[];
			        //调接口刷新数据
					getCaller({
						type:0,
						page: 1,
						limit: 10
					}).then(this.getCaller);
				}
		},
		methods: {
			getCaller(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.list = e.result;
				} else {
					this.showEmpty = true;
				}
			},
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			toback(){
				uni.navigateBack()
			},
			todetail(item){
				this.$u.route({
					url: '/pagesHome/caller/comment',
					params: {
						item:JSON.stringify(item)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#f8f8f8;
		height:100%;
	}
	.head_main{
		width:100%;
		height:1100rpx;
		max-height: 1100rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20221219/9b7be7321b3f58198f0eb87825e7aa2c.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.contact_con{
		// padding-top:20rpx;
		width:94%;
		margin:0 3%;
		.con_list{
			// background-color: #fff;
			margin-top:20rpx;
			padding:40rpx 20rpx;
			width:94%;
			border-radius: 10rpx;
			background-color: #e5f2f3;
			
			.con_img{
				width:100rpx;
				height:100rpx;
				margin-right:30rpx;
				border-radius: 60rpx;
				vertical-align: middle;
			}
			.center_con{
				display: inline-block;
				vertical-align: middle;
				.center_title{
					font-size: 33rpx; 
					font-weight: 800; 
					color: #333;
				}
				.center_type{
					font-size: 22rpx; 
					background-color: #00828a;
					color: aliceblue; 
					padding: 5rpx 10rpx; 
					margin-left: 10rpx; 
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
				}
				.tel_con{
					font-size: 24rpx;
					color:#666;
					margin-top:10rpx;
				}
				.conment_con{
					display: inline-block;
					padding:5rpx 20rpx;
					font-size: 22rpx;
					background-color: #fff;
					border-radius: 20rpx;
					margin-top:20rpx;
					color:#666;
				}
			}
		}
		
	}
</style>
